import React, {Component} from 'react'
import {StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native'

export default class LatestActivityComponent extends Component {
  latestActivityHandle(){
    
  }
  latestActivity(){
    let latestActivitys = [
      {
        img: '../../../assets/imgs/video.png',
        title: '神秘的婆罗多——印度之夜俱乐部活动精彩回顾',
        date: '10-28',
        num: 375,
      },
      {
        img: '../../../assets/imgs/video.png',
        title: '神秘的婆罗多——印度之夜俱乐部活动精彩回顾',
        date: '10-28',
        num: 375,
      },
      {
        img: '../../../assets/imgs/video.png',
        title: '神秘的婆罗多——印度之夜俱乐部活动精彩回顾神秘的婆罗多——印度之夜俱乐部活动精彩回顾神秘的婆罗多——印度之夜俱乐部活动精彩回顾',
        date: '10-28',
        num: 375,
      },
    ]
    let latestActivity = <View style={styles.latestActivityContainer}>
      <View style={MinaStyle.minaTitle}>
        <Text style={MinaStyle.minaTitleLeft}>最新活动</Text>
      </View>
      <View style={styles.latestActivityMain}>
        {latestActivitys.map((item, index) => {
          return (
            <TouchableOpacity key={index} onPress={() => {
                this.latestActivityHandle();
              }}>
              <View style={styles.latestActivityItem}>
                <Image
                  style={styles.latestActivityImg}
                  source={require('../../../assets/imgs/video.png')}
                />
                <View style={styles.latestActivityInfo}>
                  <Text ellipsizeMode="tail" numberOfLines={2} style={styles.latestActivityTitle}>{item.title}</Text>
                  <View style={styles.latestActivityOther}>
                    <Text style={styles.latestActivityDate}>{item.date}</Text>
                    <Text style={styles.latestActivityNum}>{item.num}浏览</Text>
                  </View>
                </View>
              </View>
            </TouchableOpacity>
          )
        })}
      </View>
    </View>
    return latestActivity;
  }
  render() {
    return (
      this.latestActivity()
    )
  }
}

const styles = StyleSheet.create({
  latestActivityContainer: {

  },
  latestActivityMain: {
  },
  latestActivityItem: {
    flexDirection: 'row',
    marginBottom: 16,
  },
  latestActivityImg: {
    width: 120,
    height: 75,
    borderRadius: 5,
  },
  latestActivityInfo: {
    flex: 1,
    justifyContent: 'space-around',
    marginLeft: 10,
  },
  latestActivityTitle: {
    color: '#333',
    fontSize: 14,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: ('normal', '400'),
  },
  latestActivityOther: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  latestActivityDate: {
    color: '#999',
    fontSize: 11,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: ('normal', '400'),
  },
  latestActivityNum: {
    color: '#999',
    fontSize: 11,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: ('normal', '400'),
  }
})